<template>
    <el-container>
<!--  头部区域    -->
      <el-header>
        <div>
          <img src="../assets/images/logo.png">
          <span>企业级电商平台后端管理系统</span>
        </div>
        <el-button type="primary" @click="logout">退出</el-button>
      </el-header>
      <!--主体页面-->
      <el-container>
      <!--左侧边栏菜单        -->
        <el-aside :width="isCollapse?'55px':'200px'">
<!--          菜单展开折叠-->
          <div class="collapse-button" @click="collapseButton">菜单</div>
              <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                       unique-opened :collapse="isCollapse" :collapse-transition="false" router
                      :default-active="activeHighlightValue"
              >
                  <!-- 一级菜单
                  router:是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
                  default-active:当前激活菜单的 index
                  -->
                <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
<!--                  一级菜单的模板-->
                    <template slot="title">
<!--                      一级菜单的图标-->
                      <i :class="menuIcons[item.id]"></i>
<!--                      一级菜单的文本-->
                      <span>{{item.authName}}</span>
                    </template>
                    <!--二级菜单
                      启用该模式会在激活导航时以 index 作为 path 进行路由跳转
                      思路:
                        需要将index ="/path"  做成动态的
                    -->
                  <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children"
                                :key="subItem.id"  @click="activeHightlight('/'+subItem.path)">
                    <template slot="title">
                      <!--    二级菜单的图标-->
                      <i class="el-icon-menu"></i>
                      <!--    二级菜单的文本-->
                      <span>{{subItem.authName}}</span>
                    </template>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
        </el-aside>
      <!-- 内容区域       -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
    /*
        从服务端加载菜单栏数据
            什么时候获取菜单栏数据???   当页面加载的时候去获取数据
    */
    export default {
      data() {
        return {

          //菜单栏数据
          menulist: [],
          //菜单的icon
          menuIcons: {
            '125': "el-icon-s-custom",
            '103': "el-icon-setting",
            '101': "el-icon-s-goods",
            '102': "el-icon-s-order",
            '145': "el-icon-s-data",
          },
          isCollapse: false,
          //高亮显示的菜单
          activeHighlightValue: '',


        };
      },
      created() {
        //调用服务端接口获取数据
        this.getMenuList();
        this.activeHighlightValue = window.sessionStorage.getItem("activeHighlightValue");
      },
      methods: {
        async getMenuList() {
          const {data: res} = await this.$http.get("menus");
          // console.log(res);
          if (res.meta.status != 200) return this.$message.error(res.meta.msg());
          //请求成功
          this.menulist = res.data;
          console.log(res.data);
        },
        collapseButton() {
          this.isCollapse = !this.isCollapse;
        },
        activeHightlight(path) {
          //保存到session,当页面初始化完成的时候,从session中取出该值,进行赋值
          window.sessionStorage.setItem("activeHighlightValue", path);
          this.activeHighlightValue = path;
        },
        logout: {},

      },
    };
</script>

<style lang="less" scoped>
  .el-header{
    background-color: #c2c4e0;
    align-items: center;    /*这是一个Flexbox属性，用于垂直居中*/
    display: flex;
                              /*当你给一个元素设置 display: flex; 时，这个元素的子元素会按照弹性布局的规则进行排列，而不是按照默认的块级或行内布局。
                              这意味着子元素会沿着弹性容器的主轴（默认为水平方向）排列，并且你可以使用 Flexbox 的其他属性来进一步控制它们的对齐、间距和大小。*/
    justify-content: space-between;
                              /*弹性子项会沿着主轴分布，并且它们之间的空间会均匀分布。具体来说：
                                  1.第一个弹性子项会与弹性容器的起始边界对齐。
                                  2.最后一个弹性子项会与弹性容器的结束边界对齐。
                                  3.剩余的空间会平均分配到中间的所有弹性子项之间。*/
    padding-left: 0px;
    color: #fff;
    font-size: 22px;
    >div {
                                /* > 是一个子选择器（child combinator），它用于选择某个元素的直接子元素。具体来说，在 .el-header > div 这个选择器中，
                                   > 的作用是指定只选择 .el-header 下的直接 div 子元素，而不选择 .el-header 下任意层级（如孙子元素、曾孙子元素等）的 div 元素。*/
      display: flex;              /*设置 .el-header 的显示方式为Flexbox，使其成为一个flex容器。*/
      align-items: center;
      span{
                               /*这里的 span 没有使用 >，这意味着 span 选择器会选中 .el-header > div 内部的所有 span 元素，无论它们是不是直接子元素*/
        margin-left: 17px;
      }
    }
  }

  .el-aside{
    background-color: #395cce;

    .el-menu {
      border-right: none;   //取出多出来的1像素

    }
  }

  .el-main{
    background-color: #dee3eb;
  }

  .el-container {
    height: 100%;
  }

  .collapse-button {
    font-size: 18px;
    line-height: 27px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.3em;
    cursor: pointer;

  }



</style>